<template>
    <lay-row >
        <lay-col md="12" sm="12">
            <div v-if="templatedata.length > 0" style="overflow-y: hidden;overflow-x: hidden;box-sizing: border-box; scrollbar-width: thin;scrollbar-color: #bfc1c4 #fff;">
                <lay-page v-if="pageconfig.page.total > 0" simple v-model="pageconfig.page.current"  @change="change" :limit="pageconfig.page.limit" :total="pageconfig.page.total"></lay-page>
         
                <lay-card v-for="item in templatedata" :key="item.id" :title="item.title" @click="copy(item)" >
                    <div  v-html="item.template"></div>
                </lay-card>
         </div>
            <div v-else>
                <lay-empty></lay-empty>
            </div>

           
        </lay-col>
        <lay-col md="12" sm="12">
            <VueUeditorWrap  v-model="content"  editor-id="ornament" ref="ornament" name="ornament" :destroy="true" :config="config">
            </VueUeditorWrap>

        </lay-col>
    </lay-row>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { VueUeditorWrap } from 'vue-ueditor-wrap';
import { useUserStore } from "../../store/user";
import webosutils from 'webosutils';
const userinfo = useUserStore();
const templatedata = ref<any>([]);
    const content=ref("");
const tool = ref(['source','fullscreen', 'undo', 'redo', '|',
    'bold', 'italic', 'underline', 'fontborder', 'strikethrough',
     'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
    // 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
    // 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
    'directionalityltr', 'directionalityrtl', 'indent', '|',
    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
    'horizontal',
    // 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|',
    'print', 'preview'
]);
const pageconfig = ref({
    page: {
    total: 0,
    limit: 5,
    current: 1,
    showRefresh: true,
    limits: [5,10,200]
  },
});
const ornament=ref<any>(null);
const config = ref(
    {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: true,
        elementPathEnabled: true,
        // 初始容器高度
          initialFrameHeight: "100%",

        // 初始容器宽度
        initialFrameWidth: '99%',
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        serverUrl: '/v1/api/ueditor/upload?asxsyd92user=' + (userinfo == null ? "" : userinfo.userInfo.userid),
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: '/ueditor/',
        toolbars: [tool.value],
        // 配合最新编译的资源文件，你可以实现添加自定义Request Headers,详情https://github.com/HaoChuan9421/ueditor/commits/dev-1.4.3.3
        headers: {
            'Authorization': "bearer " + userinfo.token,
        }
    }
);

const getArticleTemplate = () => {
    webosutils.http.post("/v1/api/tasks/getArticleTemplate", { page: pageconfig.value.page.current , limit: pageconfig.value.page.limit }).then((res: any) => {
        if (res.success) {

            templatedata.value = res.data;
            pageconfig.value.page.total = res.count;
        }
    }).catch(err => {
        console.log(err);
    })
}
getArticleTemplate();
const copy=(item :any)=>{
    content.value=content.value+item.template;
}
const change = (page: any) => {

pageconfig.value.page.current = page.current;
pageconfig.value.page.limit = page.limit;
getArticleTemplate();
}
</script>
<style scoped></style>